<template>
    <!-- 我也不知道是啥玩意儿 -->
    <div class="page-title-section">
        <div class="container">
            <div class="page-title-content">
                <div class="title">
                    {{props.title}}
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <router-link to="/">首页</router-link>
                        </li>
                        <li class="breadcrumb-item active">
                            <router-link :to="route.path">{{route.meta.title}}</router-link>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { useRoute } from 'vue-router'
interface Props {
    title: string,
}

const props = defineProps<Props>()

let route = useRoute()

</script>

<style scoped lang="scss">
a {
    color: var(--secondary-color);
    text-decoration: none;
}

.page-title-section {
    background: linear-gradient(120deg, rgba(5, 89, 96, 0.9) 0%, rgba(5, 89, 96, 0.95) 100%), url("@/assets/background/bg_title.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;

    .container {
        max-width: var(--min-width);
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 0;
        margin-right: auto;
        margin-left: auto;

    }
}

.page-title-content {
    display: flex;
    align-items: center;
    position: relative;
    height: 270px;

    .title {
        font-size: 54px;
        letter-spacing: 1px;
    }

    nav {
        position: absolute;
        left: 0;
        bottom: 0;

        ol {
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            padding: 0.75rem 1rem;
            // margin-bottom: 1rem;
            list-style: none;
            background-color: (--white);
            background: rgba(11, 18, 30, 0.6);

            .breadcrumb-item a {
                color: #FDE428;
            }

            .breadcrumb-item+.breadcrumb-item {
                padding-left: 0.5rem;
            }

            .breadcrumb-item+.breadcrumb-item::before {
                content: "|";
                display: inline-block;
                padding-right: 0.5rem;
                // color: #6c757d;
            }

            .breadcrumb-item.active a {
                color: var(--white) !important;
            }
        }
    }
}
</style>